<template>
  <el-form
    ref="formRef"
    :model="modelValue"
    :rules="rules"
    :label-width="labelWidth"
    :inline="inline"
    class="base-form"
  >
    <template v-for="(item, index) in formItems" :key="index">
      <el-form-item
        :label="item.label"
        :prop="item.prop"
        :class="{ 'full-width': item.fullWidth }"
      >
        <!-- 输入框 -->
        <el-input
          v-if="item.type === 'input'"
          v-model="modelValue[item.prop]"
          v-bind="item.props || {}"
          :placeholder="item.placeholder || `请输入${item.label}`"
        />

        <!-- 选择器 -->
        <el-select
          v-else-if="item.type === 'select'"
          v-model="modelValue[item.prop]"
          v-bind="item.props || {}"
          :placeholder="item.placeholder || `请选择${item.label}`"
        >
          <el-option
            v-for="option in item.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>

        <!-- 日期选择器 -->
        <el-date-picker
          v-else-if="item.type === 'date'"
          v-model="modelValue[item.prop]"
          v-bind="item.props || {}"
          :placeholder="item.placeholder || `请选择${item.label}`"
        />

        <!-- 自定义插槽 -->
        <slot
          v-else-if="item.type === 'slot'"
          :name="item.slotName"
          v-bind="{ model: modelValue, prop: item.prop }"
        />
      </el-form-item>
    </template>

    <!-- 表单按钮 -->
    <el-form-item v-if="showButtons" class="form-buttons">
      <slot name="buttons">
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <el-button @click="handleReset">重置</el-button>
      </slot>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  },
  formItems: {
    type: Array,
    required: true
  },
  rules: {
    type: Object,
    default: () => ({})
  },
  labelWidth: {
    type: [String, Number],
    default: 'auto'
  },
  inline: {
    type: Boolean,
    default: false
  },
  showButtons: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['submit', 'reset'])

const formRef = ref(null)

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    emit('submit', props.modelValue)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 重置表单
const handleReset = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  emit('reset')
}

// 暴露方法
defineExpose({
  formRef,
  validate: () => formRef.value?.validate(),
  resetFields: () => formRef.value?.resetFields(),
  clearValidate: (props) => formRef.value?.clearValidate(props)
})
</script>

<style scoped>
.base-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.base-form :deep(.el-form-item) {
  margin-bottom: 0;
  flex: 1;
  min-width: 280px;
}

.base-form :deep(.el-form-item.full-width) {
  flex: 0 0 100%;
}

.base-form :deep(.el-form-item__content) {
  width: 100%;
}

.base-form :deep(.el-select),
.base-form :deep(.el-date-picker) {
  width: 100%;
}

.form-buttons {
  flex: 0 0 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .base-form :deep(.el-form-item) {
    min-width: 100%;
  }
}
</style> 